<template>
    <div>
      <van-popup v-model:show="showPopup" position="bottom">
        <van-picker-group v-model:active-tab="activeTab" title="预约日期" :tabs="['选择日期', '选择时间']" @confirm="onConfirm" @cancel="onCancel">
          <van-date-picker v-model="currentDate" :min-date="minDate" :max-date="maxDate" />
          <van-picker :columns="columnsTime" v-model="currentTime" />
        </van-picker-group>
      </van-popup>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref, onMounted } from 'vue';
  import { Popup, DatePicker, Picker, Button } from 'vant';
  
  export default defineComponent({
    components: {
      Popup,
      DatePicker,
      Picker,
      Button,
    },
    setup(props, { emit }) {
      const activeTab = ref<number>(0);
      const showPopup = ref<boolean>(false);
      const currentDate = ref<string[]>(['2025', '01', '01']);
      const currentTime = ref<number[]>([0, 0, 0]);
      const columnsTime = ref<{ text: string; value: number }[][]>([[], [], []]);
  
      const minDate = ref(new Date(2025, 0, 1));
      const maxDate = ref(new Date(2030, 5, 1));
  
      const onConfirm = () => {
        const date = currentDate.value.join('-');
        const time = currentTime.value
          .map((timePart) => String(timePart).padStart(2, '0'))
          .join(':');
        const value = `${date} ${time}`;
        emit('confirm', value);
        showPopup.value = false;
      };
  
      const onCancel = () => {
        console.log('Cancel');
        showPopup.value = false;
      };
  
      const open = () => {
        showPopup.value = true;
      };
  
      onMounted(() => {
        for (let i = 0; i < 24; i++) {
          columnsTime.value[0].push({
            text: String(i).padStart(2, '0'),
            value: i,
          });
        }
  
        for (let i = 0; i < 60; i++) {
          columnsTime.value[1].push({
            text: String(i).padStart(2, '0'),
            value: i,
          });
          columnsTime.value[2].push({
            text: String(i).padStart(2, '0'),
            value: i,
          });
        }
  
        const now = new Date();
        currentDate.value = [
          String(now.getFullYear()),
          String(now.getMonth() + 1).padStart(2, '0'),
          String(now.getDate() + 1).padStart(2, '0'),
        ];
        currentTime.value = [0,0,0];
        onConfirm()
      });
  
      return {
        minDate,
        maxDate,
        currentDate,
        currentTime,
        showPopup,
        open,
        activeTab,
        columnsTime,
        onConfirm,
        onCancel,
      };
    },
  });
  </script>
  
  <style scoped>
  </style>
  